<template>
	<view class="send">
		<view class="head">
			<view>分佣记录</view>
			<view class="circle-btn">
				<text class="txt" @click="back">返</text>
			</view>
		</view>

		<view class="info-form">

			<!-- <view class="search">
				<view class="left">

					<picker mode="date" class="time-picker" :value="params.startTime" :start="startDate" :end="endDate"
						@change="(e) => bindDateChange(e, 'startTime')" placeholder="请选择">
						<view class="uni-input">{{ params.startTime || '请选择' }}</view>
					</picker>

					<picker mode="date" class="time-picker" :value="params.endTime" :start="params.startTime"
						:end="getEndTimeEndDate" @change="(e) => bindDateChange(e, 'endTime')" placeholder="请选择">
						<view class="uni-input">{{ params.endTime || '请选择' }}</view>
					</picker>

				</view>

				<view class="right">
					<button style="width: 200rpx;" size="mini" @tap="search">搜索</button>
				</view>


			</view> -->

			<view class="item">
				<view class="title">引流人数: </view>
				<view class="text">{{ form.drainageNum }}</view>
			</view>

			<view class="item">
				<view class="title">存物总金额: </view>
				<view class="text">{{ form.storageTotal }}</view>
			</view>

			<view class="item">
				<view class="title">分佣点数: </view>
				<view class="text">{{ form.commission }}</view>
			</view>

			<view class="item">
				<view class="title">分佣总金额: </view>
				<view class="text">{{ form.commissionTotal }}</view>
			</view>


		</view>
	</view>
</template>


<script>
import * as api from '../../utils/api.js';
export default {

	data() {
		const currentDate = this.getDate({
			format: true
		});

		return {
			params: {
				startTime: currentDate,
				endTime: null,
			},
			form: {
				drainageNum: 0,
				storageTotal: 0,
				commission: 0,
				commissionTotal: 0,
			},

		}
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},

		getEndTimeEndDate() {
			// 将 endTime 的结束日期设置为 startTime 的日期加上 3 年
			const startDate = new Date(this.params.startTime);
			const endDate = new Date(startDate);
			endDate.setFullYear(endDate.getFullYear() + 5); // 设置年份为当前年份加上 3
			let year = endDate.getFullYear();
			let month = endDate.getMonth() + 1;
			let day = endDate.getDate();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},



	},

	onLoad() {
		this.getTableData();
	},

	methods: {

		async getTableData() {
			const res = await api.selectUserGiveaway();
			this.form = res.data;
		},

		async search() {
			const res = await api.selectUserGiveaway(this.params);
			this.form = res.data;
		},


		back() {
			uni.navigateBack()
		},
		bindDateChange: function (e, prop) {
			this.params[prop] = e.detail.value;
			console.log(this.params)
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 10;
			} else if (type === 'end') {
				year = year + 5;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}


	},

}
</script>

<style lang="scss">
.send {
	color: white;
	padding: 40rpx 20rpx;
	align-items: center;


	.circle-btn {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #e5b44d;
		text-align: center;
		line-height: 120rpx;

		.txt {
			color: black;
			font-size: 46rpx;
		}
	}

	.sqaure-btn {
		width: 90rpx;
		height: 90rpx;
		border-radius: 8rpx;
		background-color: yellow;
		text-align: center;
		line-height: 90rpx;
		font-size: 40rpx;
		background-color: rgba(0, 0, 0, 1);

		.txt {
			color: white;
		}
	}

	.linear-gradient-back {
		background: linear-gradient(to bottom right, #f2ebce, #856925);
	}

	.linear-gradient-order {
		background: linear-gradient(to bottom right, #ede5c1, #f8ce3d);
	}

	.head {
		display: flex;
		padding: 40rpx 10rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 46rpx;
	}

	.search {
		display: flex;
		padding: 1em;
		align-items: center;

		.left {
			flex: 1;
			display: flex;
			gap: 20rpx;

			.uni-input {
				width: 180rpx;
				line-height: 28px;
				height: 28px;
				padding: 2rpx 12rpx;
				border: 1px solid rgba(255, 255, 255, 0.7);
				border-radius: 10rpx;
			}
		}

		.right {
			text-align: right;
		}
	}

	.info-form {
		font-size: 30rpx;
		padding: 10rpx 10rpx;
		border-radius: 10rpx;

		.item {
			padding: 1em 3em;
			display: flex;
			font-size: 30rpx;

			.title {
				width: 200rpx;
				text-align: right;
			}

			.text {
				margin-left: 1em;
			}
		}
	}


}
</style>